<template>
  <!-- 搜索工作栏 -->
  <ContentWrap>
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="关键字" prop="title">
        <el-input
          v-model="queryParams.keyword"
          placeholder="请输入关键字"
          clearable
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="handleQuery"
          ><Icon icon="ep:search" class="mr-5px" /> 高级搜索</el-button
        >
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
        <el-button type="primary" plain @click="openForm('create', 0)">
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
        <el-button type="primary" plain @click="imageUpload()">
          <Icon icon="ep:plus" class="mr-5px" /> 图片上传
        </el-button>
        <el-button type="primary" plain @click="openSet">
          <Icon icon="ep:setting" class="mr-5px" /> 设置
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="data.list">
      <el-table-column
        v-for="(column, index) in data.columns"
        :key="index"
        :prop="column.prop"
        :label="column.label"
        align="center"
      />
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNo"
      :total="data.total"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <el-dialog
    v-model="showPreviewDialogFlag"
    :title="previewTitle"
    left
    :append-to-body="true"
    class="drag-dialog small-padding-dialog"
    width="75%"
    align-center
  >
    <v-form-render
      ref="formRef"
      :form-json="formJson"
      :form-data="formData"
      :option-data="optionData"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="saveForm">保存</el-button>
      </div>
    </template>
  </el-dialog>
  <!--设置弹窗-->
  <el-dialog
    v-model="showSettingDialogFlag"
    :title="settingTitle"
    left
    :append-to-body="true"
    class="drag-dialog small-padding-dialog"
    width="40%"
    align-center
  >
    <el-transfer
      :titles="['未展示', '已展示']"
      :data="fieldList"
      v-model="selectedFieldList"
      :right-default-checked="selectedFieldList"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="saveDisplayList">保存</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
    v-model="showImageUploadDialogFlag"
    title="图片上传"
    left
    :append-to-body="true"
    class="drag-dialog small-padding-dialog"
    width="60%"
    align-center
  >
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="个人素材" name="first">个人素材</el-tab-pane>
      <el-tab-pane label="本地图片" name="second">
        <el-upload
          class="upload-demo"
          :http-request="saveImageUpload"
          list-type="picture"
          multiple="true"
          :show-file-list="false"
        >
          <el-button type="primary">点击上传</el-button>
          <div class="el-upload__tip"> 支持格式：gif,jpg,jpeg,png，图片大小不超过10M</div>
        </el-upload>
        <div style="margin-top: 10px">
          <el-card v-for="(item, index) in imageList" :key="index" class="box-card">
            <div class="text-item">
              <Icon class="icon-card" icon="ep:close" @click="removeImage(index)" />
              <div class="demo-image__error">
                <div class="block">
                  <el-form label-width="80px" label-position="right">
                    <el-form-item label="名称" required>
                      <el-input v-model="item.name" />
                    </el-form-item>
                    <el-form-item label="关键字">
                      <el-input v-model="item.keywords" />
                    </el-form-item>
                    <el-form-item label="分类">
                      <el-input v-model="item.classifications" />
                    </el-form-item>
                    <el-form-item label="标签">
                      <el-input v-model="item.labels" />
                    </el-form-item>
                  </el-form>
                </div>
                <div class="block">
                  <el-image :src="item.previewUrl" />
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>
<script>
import request from '@/config/axios'
import { useRoute } from 'vue-router'

export default {
  name: 'MetaIndex',
  data() {
    return {
      activeName: 'second',
      showImageUploadDialogFlag: false,
      showSettingDialogFlag: false,
      settingTitle: '设置',
      showPreviewDialogFlag: false,
      previewTitle: '',
      metaId: 40,
      metaName: '',
      queryParams: {
        searchType: 0,
        condition: '',
        pageNo: 1,
        pageSize: 10
      },
      formJson: {
        widgetList: [],
        formConfig: {}
      },
      formData: {},
      optionData: {},
      formDataJson: {},
      formDataRawJson: {},
      updated: false,
      refreshTable: true,
      loading: false,
      isExpandAll: true,
      data: {},
      fieldList: [],
      selectedFieldList: [],
      imageList: []
    }
  },
  created() {
    const route = useRoute()
    this.metaId = route.query.id
    this.selectForm()
    this.getList()
  },
  methods: {
    removeImage(image) {
      this.imageList.splice(image, 1)
    },
    imageUpload() {
      this.showImageUploadDialogFlag = true
    },
    saveImageUpload(content) {
      let form = new FormData()
      form.append('file', content.file)
      request
        .upload({ url: '/resource/1/personal/upload', data: form })
        .then((res) => {
          this.imageList.push(res.data)
          this.$message.success('上传成功！')
        })
        .catch((error) => {
          this.$message.success('保存失败！')
        })
    },
    saveDisplayList() {
      request
        .post({ url: '/meta/' + this.metaId + '/saveDisplayList', data: this.selectedFieldList })
        .then((res) => {
          this.$message.success('保存成功！')
          this.showSettingDialogFlag = false
          this.getList()
        })
        .catch((error) => {
          this.$message.success('保存失败！')
        })
    },
    saveForm() {
      this.$refs.formRef
        .getFormData()
        .then((formData) => {
          let formDataJson = JSON.stringify(formData, null, '')
          console.log(formDataJson)
          if (this.updated) {
            this.insertForm(formDataJson)
          } else {
            this.insertForm(formDataJson)
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    insertForm(formDataJson) {
      request
        .post({ url: '/meta/data/' + this.metaId + '/create', data: formDataJson })
        .then((res) => {
          this.$message.success('保存成功！')
          this.showPreviewDialogFlag = false
          this.getList()
        })
        .catch((error) => {
          this.$message.success('保存失败！')
        })
    },
    selectForm() {
      request
        .get({ url: '/meta/one/' + this.metaId })
        .then((res) => {
          console.log(res)
          let f = JSON.parse(res.tableForm)
          this.formJson.widgetList = f.widgetList
          this.formJson.formConfig = f.formConfig
          this.metaName = res.metaName
          res.fieldList.forEach((item) => {
            this.fieldList.push({
              key: item.id,
              label: item.fieldDesc
            })
            if (item.displayList) {
              this.selectedFieldList.push(item.id)
            }
          })
          console.log(this.selectedFieldList)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    openForm(type, id) {
      if (type == 'create') {
        this.previewTitle = '新增' + this.metaName
        this.updated = false
      } else {
        this.previewTitle = '修改' + this.metaName
        this.updated = true
      }
      this.showPreviewDialogFlag = true
    },
    openSet(type, id) {
      this.showSettingDialogFlag = true
    },
    getList() {
      request
        .get({ url: '/meta/data/' + this.metaId + '/list', params: this.queryParams })
        .then((res) => {
          this.data = res
        })
        .catch((error) => {
          console.log(error)
        })
    },
    handleQuery() {
      this.getList()
    }
  }
}
</script>
<style lang="scss" scoped>
.body {
  margin: 0;
}

.box-card {
  position: relative;
  padding: 0.05rem 2%;
  margin-top: 5px;
  border: 1px solid #e0e0e0;
}

.text-item {
  overflow: hidden;
}

.box-card .icon-card {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  line-height: 0.2rem;
  cursor: pointer;
}

.demo-image__error .block {
  display: inline-block;
  width: 49%;
  text-align: center;
  vertical-align: top;
  box-sizing: border-box;
}

.demo-image__error .demonstration {
  display: block;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
  max-width: 300px;
  max-height: 200px;
  padding: 0 5px;
}

.demo-image__error .image-slot {
  display: flex;
  width: 100%;
  height: 100%;
  font-size: 30px;
  color: var(--el-text-color-secondary);
  background: var(--el-fill-color-light);
  justify-content: center;
  align-items: center;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
</style>
